    <template>
        <div id = "GuideTools">
            <div class = "tab">
                <span class = "tabIs-active activehover" @click = "clickhander">导课系统</span>
                <span class = "tabIs-activetwo activehover" @click = "clickhandertwo">其他功能</span>
            </div>
            <div class = "QueryBlock">
                <p class = "explain">本页面实现导课/章节小工具，从xxx服务器中抽取课程、章节到当前系统中。</p>
                <p class = "notes"><strong>*注：</strong></p>
                <p class = "explain">1.  远程服务器与当前服务器数据库表结构需一致。</p>
                <p class = "explain">2.  若教师对预置课程添加班级后，再利用此工具导入该课程，教师端会导致课程基本信息（课程名称、简介、图标、预置资源）替换最新版本。</p>
                <p class = "notes"><strong style = "margin-left:8px"> 例：</strong></p>
                <p class = "explain">步骤一：部署到高校Python课程，Python课程共10个章节，课程中包含这10个章节的预置资源。部署完毕后，教师A对Python课程添加班级，这时教师Python课</p>
                <p class = "explain" style = "margin-left:134px;">程共有10个章节，10个章节的预置资源。</p>
                <p class = "explain">步骤二：后续我们需要对Python课程补充4个章节，让预置课程的Python变成14个章节。利用当前工具选择整个Python课程。</p>
                <p class = "explain">步骤三：导完后，教师A的课程基本信息为最新的。很有可能教师A中的预置资源包含14个章节。</p>
                <div class = "dataBase">
                    <p class = "el">
                        <span class = "text-style" style = "position: relative;margin-right:33px" >远程服务器数据库ip：</span>
                        <input v-model="remoteDBIp" placeholder="请输入数据库ip">
                    </p>
                    <p class = "el" style = "position: relative;left:45px;margin-right: 30px;">
                        <span class = "text-style">远程服务器数据库端口号：</span>
                        <input v-model="remoteDBPort" placeholder="请输入数据库端口号" title="123" value="123" style = "left:3px;">
                    </p>
                    <p class = "el" style = "margin-left:60px">
                        <span class = "text-style">远程服务器数据库库名：</span>
                        <input v-model="remoteDBName" placeholder="请输入数据库库名">
                    </p>
                    <p class = "el" style = " position:absolute; top: 55px; left: 0px">
                        <span class = "text-style">远程服务器数据库用户名：</span>
                        <input v-model="remoteDBUser" placeholder="请输入数据库用户名">
                    </p>
                    <p class = "el" style = " position:absolute; top: 55px; left: 427px;">
                        <span class = "text-style" style = " margin-right:16px">远程服务器数据库密码：</span>
                        <input v-model="remoteDBPassword" placeholder="请输入数据库密码">
                    </p>
                </div>
                <div class = "remoteServer">
                    <p class = "el" style = "width:413px">
                        <span class = "text-style" style = "margin-right: 77px;margin-right: 78px;">远程服务器ip：</span>
                        <input v-model="remoteIp" placeholder="请输入服务器ip">
                    </p>
                    <p class = "el" style = "margin-left:15px;">
                        <span class = "text-style" style = "margin-right: 63px;">远程服务器用户：</span>
                        <input v-model="remoteUser" placeholder="请输入服务器用户">
                    </p>
                    <p class = "el" style = "margin-left:42px;">
                        <span class = "text-style" style = "margin-right: 47px;">远程服务器密码：</span>
                        <input v-model="remotePassword" placeholder="请输入服务器密码">
                    </p>
                    <p class = "el" style = "width:500px; height:30px; position:absolute; top: 55px; left: 0;">
                        <span class = "text-style" style = "margin-right: 5px;">远程服务器静态资源绝对路径：</span>
                        <input  v-model="remoteResourcesPath" placeholder="请输入绝对路径">
                    </p>
                    <p class = "el" style = "width:500px; height:30px; position:absolute; top: 55px; left: 450px;">
                        <span class = "text-style" style = "margin-right: 15px;">远程服务器ssh端口：</span>
                        <input  v-model="remotePort" placeholder="请输入服务器ssh端口">
                    </p>
                </div>
                <!-- 清脏数据选项 -->
                <div class = "radio">
                    <el-radio v-model = "radio1" label="true" border>清数据库</el-radio>
                    <el-radio v-model = "radio1" label="false" border>不清数据库</el-radio>
                </div>
                <el-button type="primary" round @click = "login" style = "width:133px; position: relative; margin:0 auto; left:44%; top:146px">查询</el-button>
            </div>
            <div class = "tree-block" v-if = "data.length != ''">
                <!-- 全选按钮 -->
                <div class = "allElection">
                    <el-checkbox v-model="flag" @change="handleCheckAllChange">全选</el-checkbox>
                </div>
                <div class = "tree">
                    <el-tree
                        :data="data"
                        ref="precut"
                        :props="defaultProps"
                        show-checkbox
                        node-key="id"
                    >
                        <!-- idSet = "default-checked-keys" -->
                        <span class="" slot-scope="{ node, data }">
                            <span :class = "data.existed == true ? 'CourseChaptersStyletwo' : 'CourseChaptersStyle'" style = "font-size:15px;">
                                {{ data.label }}
                            </span>
                            <!-- 判断data.type数值显示的图标样式 -->
                            <i class = "iconfont icon-diannao-copy" v-if = "data.type == 2 || data.type == 3" style = "color:#1277eb;font-size:17px;margin-left:5px;position:relative;top:2px;"></i>
                            <i class = "iconfont icon-tubiaozhizuomoban1" v-if = "data.type == 4" style = "color:#1277eb;font-size:18px;margin-left:5px;position:relative;top:3px;"></i>
                        </span>
                    </el-tree>
                </div>
                <el-button type="primary" round style = "width:200px;position: relative; margin:0 auto; left:41%; margin-bottom:50px;" @click = "preservation()">确定</el-button>

            </div>
            <!-- 导入失败显示 -->
            <el-dialog :close-on-click-modal="false" class="assess-dialog" title="提示信息" :visible.sync="dialogAssessShibai" :before-close='closeDialog' width="500px">
                {{ messageOne }}
                <!-- 导入成功 -->
            </el-dialog>
            <!-- 导入成功显示 -->
            <el-dialog :close-on-click-modal="false" class="assess-dialog" title="提示信息" :visible.sync="dialogAssess" :before-close='wsCloseDialogYes' width="500px">
                <!-- {{ resQuestionData.checkResult }} -->
                导入成功
            </el-dialog>
            <!-- 导入失败显示 -->
            <el-dialog :close-on-click-modal="false" class="assess-dialog" title="提示信息" :visible.sync="dialogAssessShibaitwo" :before-close='wsCloseDialogNo' width="500px">
                导入失败{{ messageTwo }}
                <!-- 导入成功 -->
            </el-dialog>
        </div>
    </template>

    <script>
    export default {
        data() {
            return {
                // 下面是所有的登录框数据
                remoteDBIp:'192.168.1.109',
                remoteDBPort:'3306',
                remoteDBName:'teaching_experiment_system',
                remoteDBUser:'root',
                remoteDBPassword:'password',
                remoteIp:'192.168.1.109',
                remoteUser:'root',
                remotePassword:'xlh82283322',
                remoteResourcesPath:'/usr/local/src/code/resources',
                remotePort:'22',
                // 所有登录框数据结束
                // 清脏数据选项
                radio1: '',

                // 查询传上来的数据
                data:[],
                // element-ui
                defaultProps: {
                    children: 'children',
                    label: 'label',
                    existed:'existed',
                    type:'type',
                },
                // 后台返回的状态弹窗
                // ws的code是200返回导入成功
                dialogAssess:false,
                // ws的code不是200返回导入成功
                dialogAssessShibai:false,
                dialogAssessShibaitwo:false,
                messageOne:'',
                messageTwo:'',
                loading:'',

                flag:false,
                // 当code==3000的时候，后台传过来的值
                wsCode:'',
                wsData:'',
            }
        },
        created () {
            this.InitWebSocket()
        },
        methods: {
            // 点击弹出框右上角×号的时候
            closeDialog(){
                let self = this;
                self.dialogAssessShibai = false;
                self.login ()
            },
            // 点击弹出框右上角×号的时候
            wsCloseDialogYes(){
                let self = this;
                self.dialogAssess = false;
                self.login ()
            },
            // 点击弹出框右上角×号的时候
            wsCloseDialogNo(){
                let self = this;
                self.dialogAssessShibaitwo = false;
                self.login ()
            },
            // 全选功能
            handleCheckAllChange() {
                if (this.flag) {
                    let num = [];
                    for(var i = 0; i < this.data.length; i++){
                        for(var k = 0; k < this.data[i].children.length; k++){
                            num.push(this.data[i].children[k].id)
                            // for(var j = 0; j <= this.data[i].children[k].length; j++){

                            // }
                        }
                    }
                    this.$refs.precut.setCheckedKeys(num);
                    // this.$refs.precut.setCheckedNodes([16343,]);
                } else {
                    this.$refs.precut.setCheckedKeys([]);
                }
            },
            // checkAll() {
            //     this.flag = true;
            //     this.$refs.precut.setCheckedNodes(this.data);
            // },

            // 查询
            login () {
                let self = this;
                if(self.remoteDBIp == ''){
                    self.$message({
                        message: '请输入数据库ip',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBPort == ''){
                    self.$message({
                        message: '请输入数据库端口号',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBName == ''){
                    self.$message({
                        message: '请输入数据库库名',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBUser == ''){
                    self.$message({
                        message: '请输入数据库用户名',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBPassword == ''){
                    self.$message({
                        message: '请输入数据库密码',
                        type: 'warning'
                    })
                    return
                }
                self.$http.get('/tes/convert-tool/ztree?remoteDBIp='+ self.remoteDBIp
                                                    + '&remoteDBPort='+ self.remoteDBPort
                                                    + '&remoteDBName='+ self.remoteDBName
                                                    + '&remoteDBUser='+ self.remoteDBUser
                                                    + '&remoteDBPassword='+ self.remoteDBPassword
                ).then(response => {
                    let res = response.data
                    if(res.code === 200){
                        // 取群体名称
                        self.data = res.data
                        self.$message({
                            message : '查询成功',
                            type : 'success'
                        })
                        self.flag = false
                    }else{
                        self.$message({
                            message: res.message,
                            type: 'warning'
                        });
                        // self.$notify({
                        //     type: 'danger', message: res.message
                        // })
                    }
                })
            },
            // 保存接口
            preservation(){
                let self = this
                if(self.remoteDBIp == ''){
                    self.$message({
                        message: '请输入数据库ip',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBPort == ''){
                    self.$message({
                        message: '请输入数据库端口号',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBName == ''){
                    self.$message({
                        message: '请输入数据库库名',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBUser == ''){
                    self.$message({
                        message: '请输入数据库用户名',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteDBPassword == ''){
                    self.$message({
                        message: '请输入数据库密码',
                        type: 'warning'
                    })
                    return
                }

                if(self.remoteIp == ''){
                    self.$message({
                        message: '请输入服务器ip',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteUser == ''){
                    self.$message({
                        message: '请输入服务器用户名',
                        type: 'warning'
                    })
                    return
                }
                if(self.remotePassword == ''){
                    self.$message({
                        message: '请输入服务器密码',
                        type: 'warning'
                    })
                    return
                }
                if(self.remoteResourcesPath == ''){
                    self.$message({
                        message: '请输入服务器静态资源绝对路径',
                        type: 'warning'
                    })
                    return
                }
                if(self.remotePort == ''){
                    self.$message({
                        message: '请输入服务器ssh端口',
                        type: 'warning'
                    })
                    return
                }
                if(self.radio1 == ''){
                    self.$message({
                        message: '请选择是否要清数据库',
                        type: 'warning'
                    })
                    return
                }

                let union=[]
                let arrlists2 = this.$refs.precut.getCheckedKeys()
                if(arrlists2.length==''){
                    self.$message({
                        message: '请选择导入的章节',
                        type: 'warning'
                    })
                    return
                }
                if(arrlists2.includes(undefined)){
                    union=arrlists2.filter(function(item){
                        return item != undefined
                    })
                    if(union == ''){
                        self.$message({
                            message: '请选择导入的章节',
                            type: 'warning'
                        });
                        return
                    }
                }else{
                    union=arrlists2
                }
                self.loading = this.$loading({
                    lock: true,
                    // function() {
                    //     if(this.wsCode != 3000){
                            text: '正在导入，请耐心等待',
                        // }else{
                            // text: this.wsData,
                        // }
                    // },
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/tes/convert-tool/import?isCleanDB='+self.radio1
                                                                    + '&remoteDBIp='+ self.remoteDBIp
                                                                    + '&remoteDBPort='+ self.remoteDBPort
                                                                    + '&remoteDBName='+ self.remoteDBName
                                                                    + '&remoteDBUser='+ self.remoteDBUser
                                                                    + '&remoteDBPassword='+ self.remoteDBPassword
                                                                    + '&remoteIp='+ self.remoteIp
                                                                    + '&remoteUser='+ self.remoteUser
                                                                    + '&remotePassword='+ self.remotePassword
                                                                    + '&remoteResourcesPath='+ self.remoteResourcesPath
                                                                    + '&remotePort='+ self.remotePort,
                                                                    union,
                ).then(response => {
                    let res = response.data

                    if(res.code === 200){
                        // 取群体名称
                        // self.$message({
                        //     message : '保存成功',
                        //     type : 'success',
                        // })
                        // loading.close()
                    }else{
                        // self.$message({
                        //     message : '保存失败',
                        //     type : 'success',
                        // })
                        self.messageOne = res.message
                        self.loading.close()
                        self.dialogAssessShibai = true
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
            // websock开始
            InitWebSocket(){
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/course/convert-tool"
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close()
                }
            },
            websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e){ //数据接收
                let self = this
                let redata = JSON.parse(e.data)
                self.wsCode = redata.code
                if(redata.code == 200){
                    self.loading.close()
                    self.dialogAssess = true
                }else if(redata.code == 3000){
                    // self.wsData = redata.data
                    // self.loading.close()
                    self.loading.text = redata.data;
                    // self.loading = this.$loading({
                    //     lock: true,
                    //     // function() {
                    //     //     if(this.wsCode != 3000){
                    //             // text: '正在导入，请耐心等待',
                    //         // }else{
                    //             text: redata.data,
                    //         // }
                    //     // },
                    //     spinner: 'el-icon-loading',
                    //     background: 'rgba(0, 0, 0, 0.7)'
                    // })
                    if(self.dialogAssessShibai == true || self.dialogAssess == true || self.dialogAssessShibaitwo == true){
                        self.loading.close()
                    }
                }else{
                    self.loading.close()
                    self.messageTwo = redata.message
                    self.dialogAssessShibaitwo = true
                }
                            // 此处是逻辑
            },
            destroyed: function() {
                //页面销毁时关闭长连接
                this.over()
            },
            // tab栏切换的两个方法
            clickhander(){
                $(".tabIs-active").css({'color': '#385899','border-bottom': '2px solid #385899',})
                $(".tabIs-activetwo").css({'color': 'black','border-bottom': 'none',})
                $(".QueryBlock").show();
                $(".tree-block").show();
            },
            clickhandertwo(){
                $(".tabIs-active").css({'color': 'black','border-bottom': 'none',})
                $(".tabIs-activetwo").css({'color': '#385899','border-bottom': '2px solid #385899',})
                $(".QueryBlock").hide()
                $(".tree-block").hide()
            },
        }
    }
    </script>
    <style lang = "scss" scoped>
        *{
            margin: 0 ;
            padding : 0;
            list-style: none;
            text-decoration: none;
        }
        #GuideTools{
            width : 1250px;
            margin : 0 auto;
            position: relative;
            top: 20px;
        }
        .tab{
            width: 100%;
            height: 61px;
            position: relative;
            background: #fff;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }
        .tab span{
            height: 61px;
            display: inline-block;
            line-height: 61px;
            color: #000;
            cursor: pointer;
            margin-left: 35px;
        }
        .tab .tabIs-active{
            color: #385899;
            border-bottom: 2px solid #385899;
        }
        .tab .activehover:hover{
            color: #1277eb !important;
        }
        .QueryBlock{
            width: 100%;
            height: 685px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }
        .explain{
            width: 1150px;
            color: black;
            font-size: 16px;
            position: relative;
            margin-left: 70px;
            top: 30px;
            margin-bottom: 10px;
        }
        .notes{
            color: red;
            font-size: 16px;
            position: relative;
            margin-left: 25px;
            top: 30px;
            margin-bottom: 10px;
        }
        /* 上面五个数据库的样式 */
        .dataBase{
            width: 1230px;
            height: 90px;
            position: relative;
            margin-top: 20px;
            margin-left: 25px;
            top: 50px;
            .el{
                width: 380px;
                height: 30px;
                position: relative;
                display: initial;
                float: left;
                input{
                    width: 150px;
                    position: relative;
                    display: block;
                    font-size: 14px;
                    border-radius: 3px;
                    outline-style: none;
                    border: 1px solid #ccc;
                    padding: 6px 16px 6px 11px;
                    font-family: "Microsoft soft";
                }
            }
        }
        /* 下面五个远程服务器的样式 */
        .remoteServer{
            width: 1230px;
            height: 100px;
            position: relative;
            margin-left: 25px;
            top: 87px;
            .el{
                width: 380px;
                height: 30px;
                position: relative;
                display: initial;
                float: left;
                input{
                    width: 150px;
                    position: relative;
                    display: block;
                    font-size: 14px;
                    border-radius: 3px;
                    outline-style: none;
                    border: 1px solid #ccc;
                    padding: 6px 16px 6px 11px;
                    font-family: "Microsoft soft";
                }
            }
        }
        /* // 二期评价 */
        .assess-dialog{
            font-size: 16px;
            color: #727272;
            line-height: 30px;
        }
        .el-input__inner{
            width: 200px;
            height: 32px;
            line-height: 32px;
            float: left;
            margin-right: 20px;
        }
        .el-input{
            display: inherit;
        }
        .radio{
            width: 450px;
            height: auto;
            position: absolute;
            margin-left: 874px;
            margin-top: 40px;
        }
        .text-style{
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            float: left;
        }

        .tree-block{
            width: 100%;
            background: #fff;
            margin-top:30px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }
        /* 全选按钮 */
        .allElection{
            position: relative;
            top: 26px;
            left: 240px;
            z-index: 10;
        }
        .tree{
            width: 800px;
            position: relative;
            margin: 0 auto;
            border: 1px solid black;
            margin-bottom: 100px;
        }
        /* 树的位置 */
        .el-tree{
            margin: 30px 0 50px 20px;
        }
        .el-tree-node__label{
            font-size: 20px;
        }
        .el-checkbox__inner{
            width: 20px;
            height: 20px;
            border: 1px solid #000000;
        }
        /* 每一级的样式 */
        .el-tree-node__content{
            margin-bottom: 6px;
            height: 30px;
        }
        /* 折叠小图标 */
        .el-icon-caret-right:before{
            font-size: 20px;
            position: relative;
        }
        /* 第二级 */
        .el-tree-node.is-expanded>.el-tree-node__children{
            margin-left:11px;
        }
        /* 蓝色选中之后的小对号 */
        .el-checkbox__inner::after{
            width: 6px;
            height: 12px;
            top: 0px;
            left: 6px;
        }
        .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
            top: 8px;
        }
        /* 如果data.existed为true的时候显示的样式 */
        .CourseChaptersStyle{
            color:black;
            /* background-color: rgba(88,223,227,0.5); */
            /* border: 1px solid #b7b7b7; */
            /* border-radius: 5px; */
            padding: 0 10px 0;
            position: relative;
            top: 1px;
        }
        .CourseChaptersStyletwo{
            color:black;
            padding: 0 10px 0;
            border-radius: 5px;
            background: #e2efff;
            border: 1px solid #6e9cd1;
            position: relative;
            top: 1px;
        }
    </style>
    <style scoped>

    </style>
